import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/generated/a.dart';
import 'package:finance_app/generated/l10n.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/utils/reg_exp_utils.dart';
import 'package:finance_app/src/widgets/input/form_input_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class AutoCompleteInputField extends StatelessWidget {
  final TextEditingController controller;
  final FocusNode focusNode;
  final VoidCallback onRemove;
  final List<String> options;

  const AutoCompleteInputField(
      {Key key, this.controller, this.focusNode, this.onRemove, this.options})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RawAutocomplete<String>(
      textEditingController: controller,
      focusNode: focusNode,
      optionsBuilder: (TextEditingValue textEditingValue) {
        return options.where((String option) {
          return RegExpUtils.getSearchRegExp(textEditingValue.text)
              .hasMatch(option);
        });
      },
      fieldViewBuilder: (BuildContext context,
          TextEditingController textEditingController,
          FocusNode focusNode,
          VoidCallback onFieldSubmitted) {
        return FromInputField(
          controller: textEditingController,
          focusNode: focusNode,
          tip: S.current.category,
          onFieldSubmitted: (String value) {
            onFieldSubmitted();
          },
          trailing: PressedOpacityButton(
            onPressed: onRemove,
            child: SvgPicture.asset(
              A.assetsImagesStyleDelete_1,
              width: getDp(24),
              height: getDp(24),
              fit: BoxFit.contain,
            ),
          ),
        );
      },
      optionsViewBuilder: (BuildContext context,
          AutocompleteOnSelected<String> onSelected, Iterable<String> options) {
        return Align(
          alignment: Alignment.topLeft,
          child: Material(
            elevation: 0.0,
            type: MaterialType.transparency,
            child: Container(
              clipBehavior: Clip.none,
              height: getDp(162),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(getDp(10)),
                    bottomRight: Radius.circular(getDp(10)),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.25),
                      blurRadius: getDp(14),
                      spreadRadius: -getDp(5),
                    )
                  ]),
              child: ListView.builder(
                padding: EdgeInsets.zero,
                itemCount: options.length,
                itemBuilder: (BuildContext context, int index) {
                  final String option = options.elementAt(index);
                  return PressedOpacityButton(
                    onPressed: () {
                      onSelected(option);
                    },
                    padding: EdgeInsets.symmetric(
                      vertical: getDp(19),
                      horizontal: getDp(35),
                    ),
                    child: Text(
                      option,
                      style: TextStyle(
                        color: aceBlackColor,
                        fontSize: getSp(16),
                        fontWeight: FontWeight.w700,
                        height: 1,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        );
      },
    );
  }
}
